<template>
    <div>
        <h1>显示</h1>
        名称：<input type="text" v-model="str.name" />
        状态:<select v-model="str.state">
            <option value="">请选择</option>
            <option value="0">禁用</option>
            <option value="1">启用</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table class="table table-bordered">
            <tr>
                <td>Id</td>
                <td>用户名</td>
                <td>房号名称</td>
                <td>门店</td>
                <td>地址</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.yongHU }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.shop }}</td>
                <td>{{ item.addr }}</td>
                <td>{{ item.state == 0 ? '禁用' : '启用' }}</td>
                <td>
                    <input type="button" v-if="item.state == 1" value="禁用" @click="UpDown(item.id, 0)">
                    <input type="button" v-if="item.state == 0" value="启用" @click="UpDown(item.id, 1)">
                    <input type="button" value="删除" @click="DelDan(item.id)">
                    <input type="button" value="修改" @click="Upd(item.id)">
                </td>

            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let route = useRoute();
let router = useRouter();
let data: any = reactive({
    str: {
        "name": "",
        "state": "",
    },
    list: [],
});
let { str, list } = toRefs(data);

onMounted(() => {
    Show();
})

const Show = () => {


    let obj = {
        "name": str.value.name,
        "state": str.value.state,
    }

    axios({
        url: '/api/HouseN/HouseNList',
        method: 'get',
        params: obj
    }).then((res) => {
        list.value = res.data.data
    })

}

const UpDown = (id: any, state: any) => {
    let obj = {
        "id": id,
        "state": state,
    }
    axios({
        url: '/api/HouseN/UpDown',
        method: 'put',
        params: obj
    }).then((res) => {
        Show();
    })

}

const DelDan = (id: any) => {
    let res = confirm("确定要删除吗？")
    let obj = {
        "id": id,
    }
    if (res) {
        axios({
            url: '/api/HouseN/DelDan',
            method: 'delete',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert("删除成功")
                Show();
            }
            else {
                alert("删除失败")
                return;
            }

        })
    }
}

const Upd = (id: any) => {
    router.push({ path: "/upd", query: { id: id } })
}
</script>

<style scoped></style>